<template>
  <div class="popup" ref="popup" v-show="currentCoordinate">
    <div class="text_info">
      <ul>
        <li>基本信息：</li>
        <li>编号：</li>
        <li>等级：</li>
        <li>新旧：</li>
        <li>类型：</li>
        <li>层数：</li>
        <li>面积：</li>
        <li>朝向：</li>
        <li>独立上下水：</li>
      </ul>
    </div>
    <div class="img_info">
      <el-button @click="closePopup"></el-button>
      <img src="../../../../../assets/images/housing/放大_u31.svg" alt="" class="LinkImg" @click="openLinkImg">
    </div>
    <!-- <span class="icon-close" @click="closePopup">✖</span>
        <div class="content">{{currentCoordinate}}</div> -->
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import { toStringHDMS } from 'ol/coordinate'
import { toLonLat } from 'ol/proj'
import Overlay from 'ol/Overlay'
export default {
  name: 'popup',
  data() {
    return {
      map: null,
      currentCoordinate: null, // 弹窗坐标数据
      overlay: null
    }
  },
  methods: {
    init(data, map) {
      this.overlay = new Overlay({
        element: this.$refs.popup, // 弹窗标签，在html里
        autoPan: true, // 如果弹窗在底图边缘时，底图会移动
        autoPanAnimation: { // 底图移动动画
          duration: 250
        }
      })
      this.map = map
      this.map.addOverlay(this.overlay)
      this.mapAddOverlay(data)
    },
    initMap() {
      // 弹窗
      this.overlay = new Overlay({
        element: this.$refs.popup, // 弹窗标签，在html里
        autoPan: true, // 如果弹窗在底图边缘时，底图会移动
        autoPanAnimation: { // 底图移动动画
          duration: 250
        }
      })
    },
    mapAddOverlay(coordinate) { // 地图点击事件
      const hdms = toStringHDMS(toLonLat(coordinate)) // 转换坐标格式
      this.currentCoordinate = hdms // 保存坐标点
      setTimeout(() => {
        // 设置弹窗位置
        // 这里要设置定时器，不然弹窗首次出现，底图会跑偏
        this.overlay.setPosition(coordinate)
      }, 0)
    },
    openLinkImg(){
      window.open('https://www.baidu.com/','_blank');
    },
    // 关闭弹窗
    closePopup() {
      // 把弹窗位置设置为undefined，并清空坐标数据
      this.overlay.setPosition(undefined)
      this.currentCoordinate = null
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
/* 弹窗样式 */
.popup {
  min-width: 350px;
  position: relative;
  background: #fff;
  //   padding: 8px 16px;
  display: flex;
  flex-direction: row;
  transform: translate(-50%, calc(-100% - 12px));
  .text_info {
    width: 30%;
    height: 200px;
    font-size: 14px;
    ul {
      list-style: none;
      margin: 0px;
      padding: 0px;
    }
  }
  .img_info {
    width: 70%;
    height: 200px;
    background: green;
  }

  /* 弹窗下方的小三角形 */
  &::after {
    display: block;
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border: 12px solid transparent;
    border-top-color: #fff;
    bottom: -23px;
    left: 50%;
    transform: translateX(-50%);
  }
}
/* 关闭弹窗按钮 */
.icon-close {
  cursor: pointer;
  align-self: flex-end;
  margin-bottom: 10px;
}
.LinkImg{
  cursor: pointer;
}
</style>